@sanity/icons

What is @sanity/icons?

@sanity/icons is an npm package that provides a collection of SVG icons designed for use with the Sanity.io content platform. These icons can be easily integrated into React applications to enhance the user interface with visually appealing and consistent iconography.

What are @sanity/icons's main functionalities?

Importing Icons

You can import specific icons from the @sanity/icons package to use in your React components. This allows you to include only the icons you need, optimizing your application's performance.

import { AddIcon, EditIcon, TrashIcon } from '@sanity/icons';

Using Icons in Components

Icons can be used directly within your React components. This example demonstrates how to use the AddIcon within a button component to create a visually appealing 'Add Item' button.

import { AddIcon } from '@sanity/icons';

function AddButton() {
  return (
    <button>
      <AddIcon /> Add Item
    </button>
  );
}

Styling Icons

Icons can be styled using standard CSS properties. This example shows how to style the EditIcon with a margin and how to style the button containing the icon.

import { EditIcon } from '@sanity/icons';

function EditButton() {
  return (
    <button style={{ color: 'blue', fontSize: '24px' }}>
      <EditIcon style={{ marginRight: '8px' }} /> Edit
    </button>
  );
}

Other packages similar to @sanity/icons

react-icons

react-icons is a popular package that provides a wide variety of icons from different icon libraries such as Font Awesome, Material Design, and more. It offers a larger selection of icons compared to @sanity/icons and is highly customizable.

fontawesome

fontawesome is a widely-used icon library that offers a vast collection of icons. It provides both free and premium icons and can be used in various frameworks and libraries, including React. It is more versatile and has a larger icon set compared to @sanity/icons.

README

@sanity/icons

The Sanity icons.

npm install @sanity/icons

# Install peer dependencies
npm install react

Usage

import {RocketIcon} from '@sanity/icons'

function App () {
  return <RocketIcon style={{fontSize: 72}}>
}

License

MIT-licensed. See LICENSE.

Changelog

2.11.8 (2024-04-09)

Bug Fixes

• improve esm.sh compat (ce00433)